import { Tabs } from "antd";
import { useRef, useCallback, useMemo } from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import UserListConterntMap from "./UserListConterntMap";
import UserListConternt from "./UserListConternt";
export default function AppUserList(props) {
  const { match, location, history } = props;
  const { path } = match;
  const { pathname } = location;
  const activeKey = useMemo(() => pathname.split("/")[2] || "", [pathname]);
  const onChange = useCallback((key) => {
    history.push(`${path}/${key}`);
  }, []);
  // 不变化的 items可以用uesememo或者useRef
  const items = useRef([
    { label: "列表", key: "list" }, // 务必填写 key
    { label: "其他", key: "map" },
  ]);
  console.log("dadwad", activeKey);
  return (
    <>
      <Tabs activeKey={activeKey} onChange={onChange} items={items.current} />
      <Switch>
        <Route path={`${path}/list`} component={UserListConternt}></Route>
        <Route path={`${path}/map`} component={UserListConterntMap}></Route>
        <Redirect to={`${path}/list`}></Redirect>
      </Switch>
    </>
  );
}
